<template>
  <div>
    {{msg}}
    <div v-html="rawHtml"></div>
    <div>{{msg+'123456789'}}</div>
    <div v-if="true" :class="[redClass]">test if</div>
    <div><a v-bind:href="url" :class="{blue:true}">...</a></div>
    <div><a v-bind:[getname]="url">...</a></div>
    <div v-on:[getClick]="console1">click</div>
    <div @click="console2('parent')">parent
      <div @click.stop="console2('BoundaryChild.vue')">child</div>
    </div>
    <div>{{getArraySum}}</div>
    <div @click="arrays.push(10)">add num</div>
    ---------------------------
    <div :class="{blue:1}">1style class</div>
    <div :class="{blue:active,marginstyle:active}">2style class</div>
    <div :class="styleObject">3style class</div>
    <div :class="getStyleObject">4style class</div>
    <div :class="[blue,marginstyle]">5style class</div>
    <div :class="[1?blue:'',marginstyle]">6style class</div>
    <div :class="[{blue:1},marginstyle]">7style class</div>
    <div :style="{color:color,fontSize:fontSize}">8style class</div>
    <div :style="styleObject1">8style class</div>
    <div :style="[styleObject1,styleObject2]">9style class</div>
    ---------------------------
    <h1 v-if="0">Vue is awesome!</h1>
    <h1 v-else>Oh no 😢</h1>
    <template v-if="1">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>
    <div v-if="Math.random() > 0.5">
      Now you see me
    </div>
    <div v-else>
      Now you don't
    </div>
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>

    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address">
    </template>
    <button @click="transform">切换</button>
    <br>

    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="Username">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="Email">
    </template>
    <button @click="transform">切换</button>
    <br>

    <label v-show="loginType === 'username'">Username</label>
    <label v-show="loginType === 'email'">Email</label>
    ---------------------------
    <ul id="example-1">
      <li v-for="item in items">
        {{ item.message }}
      </li>
    </ul>

    <ul>
      <li v-for="value in styleObject">
        {{ value }}
      </li>
    </ul>

    <div v-for="(value, name) in styleObject">
      {{ name }}: {{ value }}
    </div>

    <div v-for="(value, name, index) in styleObject">
      {{ index }}. {{ name }}: {{ value }}
    </div>
    ---------------------------
    <div>
      <button v-on:click="counter += 1">Add 1</button>
      <p>The button above has been clicked {{ counter }} times.</p>
    </div>
    <button v-on:click="greet">Greet</button>

    <div id="example-3">
      <button v-on:click="say('hi',$event)">Say hi</button>
      <button v-on:click="say('what',$event)">Say what</button>
    </div>

    <div style="width: 100px;height: 100px;background-color: red" @click.self="console2('parent')">
      <button style="width: 50px;height: 50px;" @click.stop="console2('son')">click</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Base",
    data() {
      return {
        msg: 'Hello World',
        rawHtml: '<span>哈哈哈哈</span>',
        url: 'www.apple.com',
        arrays: [1, 2, 3, 4, 5, 6, 7, 8, 9,],
        redClass: 'red-class',
        active: true,
        styleObject: {
          blue: true,
          marginstyle: true
        },
        blue: 'blue',
        marginstyle: 'marginstyle',
        color: 'red',
        fontSize: '30',
        styleObject1: {
          color: 'red',
        },
        styleObject2: {
          fontSize: '13px'
        },
        type: 'A',
        loginType: 'username',
        items: [
          {message: 'Foo'},
          {message: 'Bar'}
        ],
        counter: 0
      }
    },
    computed: {
      getname: function () {
        return 'hr' + 'ef'
      },
      getClick: function () {
        return 'click'
      },
      getArraySum: function () {
        return this.arrays.reduce((prev, curr) => {
          return prev + curr
        })
      },
      getStyleObject: function () {
        return {
          blue: 1 + 1 + 1,
          marginstyle: 0
        }
      }
    },
    methods: {
      console1() {
        console.log(123)
      },
      console2(text) {
        console.log(text)
      },
      transform() {
        if (this.loginType === 'username') {
          this.loginType = 'email'
        } else {
          this.loginType = 'username'
        }
      },
      greet: function (event) {
        // `this` 在方法里指向当前 Vue 实例
        alert('Hello ')
        // `event` 是原生 DOM 事件
        if (event) {
          alert(event.target.tagName)
        }
      },
      say: function (message,event) {
        alert(message)
        console.log(event)
      }
    },
    watch: {
      arrays: function () {
        console.log(this.arrays)
      }
    }
  }
</script>

<style scoped>
  .red-class {
    color: red;
  }

  .blue {
    color: blue;
  }

  .marginstyle {
    margin-top: 10px;
  }
</style>
